<template>
  <div>
    <div class="icon-search">
      <input
        v-model="key"
        :placeholder="tip"
        type="text"
        @blur="handleBlur"
        @focus="handleFocus"
        @input="handleInput"
      >
    </div>
    <div class="icon-block icon-bar">
      <div v-for="(item, i) in icon" :key="i" class="icon-wrap" @click="handleChoose(item)">
        <div class="icons-item">
          <Icon :type="item" style="font-size: 32px;"/>
          <p>{{ item }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {icons} from '../../libs/icon.js'
import './icon.css'

export default {
  name: 'IconChoose',
  data() {
    return {
      icon: [],
      key: '',
      tip: '输入英文关键词搜索，比如 success'
    }
  },
  created() {
    const re = []
    icons.forEach(e => {
      e.icons.forEach(item => {
        re.push(item)
      })
    })
    this.icon = re
  },
  methods: {
    handleBlur() {
      if (!this.key) {
        this.tip = '输入英文关键词搜索，比如 success'
      }
    },
    handleChoose(v) {
      this.$emit('on-select', v)
    },
    handleFocus() {
      if (!this.key) {
        this.tip = ''
      }
    },
    handleInput() {
      if (this.key) {
        // 搜索
        const re = []
        icons.forEach(e => {
          e.tags.forEach(item => {
            if (item.indexOf(this.key) >= 0) {
              e.icons.forEach(r => {
                re.push(r)
              })
            }
          })
        })
        this.icon = re
      }
    }
  }
}
</script>

